<template>
  <el-container class="el-container">
    <!-- 左侧工具栏 -->
    <el-aside width="150px" style="background-color: #f2f2f2;">
      <el-menu :default-active="activeTool" @select="handleSelect">
        <el-menu-item index="brush">画笔</el-menu-item>
        <el-menu-item index="eraser">橡皮擦</el-menu-item>
        <el-menu-item index="save">保存</el-menu-item>
        <el-menu-item index="clear">清空画布</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 中间画布区域 -->
    <el-main style="padding: 0; display: flex; justify-content: center; align-items: center;">
      <canvas
          id="drawingCanvas"
          width="1000"
          height="600"
          @mousedown="startPosition"
          @mouseup="endPosition"
          @mousemove="draw"
          ref="canvas"
          style="border: 1px solid #ccc; display: block;">
      </canvas>
    </el-main>

    <!-- 右侧属性栏 -->
    <el-aside width="200px" style="background-color: #f9f9f9; padding: 20px;">
      <h3>属性栏</h3>
      <el-form label-position="top">
        <el-form-item label="画笔大小">
          <el-slider v-model="brushSize" :min="1" :max="20"></el-slider>
        </el-form-item>
        <el-form-item label="画笔颜色" v-if="activeTool === 'brush'">
          <el-color-picker v-model="brushColor"></el-color-picker>
        </el-form-item>
      </el-form>
    </el-aside>
  </el-container>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      activeTool: 'brush',
      painting: false,
      drawingRecords: [],  // 存储绘画数据
      brushSize: 5,
      brushColor: '#000000',
    };
  },
  methods: {
    startPosition(e) {
      this.painting = true;
      const ctx = this.$refs.canvas.getContext('2d');
      ctx.beginPath();
      const rect = this.$refs.canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      ctx.moveTo(x, y);
    },
    endPosition() {
      this.painting = false;
      this.saveDrawing();  // 保存绘画
    },
    draw(e) {
      if (!this.painting) return;
      const ctx = this.$refs.canvas.getContext('2d');
      const rect = this.$refs.canvas.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      this.drawingRecords.push({
        x, y, tool: this.activeTool,
        brushSize: this.brushSize,
        brushColor: this.brushColor
      });

      ctx.lineWidth = this.brushSize;
      ctx.strokeStyle = this.activeTool === 'eraser' ? '#FFFFFF' : this.brushColor;
      ctx.lineTo(x, y);
      ctx.stroke();
    },
    saveDrawing() {
      // 确认绘画记录是否包含正确的数据
      console.log("Sending drawing records:", this.drawingRecords);

      axios.post('/api/drawing/saveDrawing', {
        userId: 'user123',  // 用户ID
        drawingRecords: this.drawingRecords  // 绘画记录
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
          .then(res => {
            console.log('保存成功:', res.data);
            this.$message.success('绘画已保存');
          })
          .catch(error => {
            console.error('保存绘画失败:', error.response ? error.response.data : error);
            this.$message.error('保存绘画失败');
          });
    },
    handleSelect(tool) {
      this.activeTool = tool;
      if (tool === 'save') {
        this.saveDrawing();
      } else if (tool === 'clear') {
        this.clearCanvas();
      }
    },
    clearCanvas() {
      const ctx = this.$refs.canvas.getContext('2d');
      ctx.clearRect(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
      this.drawingRecords = [];  // 清空绘画记录
    }
  }
};
</script>

<style scoped>
.el-container {
  display: flex;
  height: 95%;
}

canvas {
  border: 1px solid #ccc;
  display: block;
}
</style>
